<template>
  <div class="ysnTable">
    <el-table 
      ref="tableRef"
      v-bind="$attrs"
      :data="props.data" 
      style="width: 100%"
    >
      <el-table-column 
        v-for="(item,index) in column"
        :key="index"
        v-bind="item"
        :align="item.align || getAlign(item)" 
        :header-align="item.align || getAlign(item)"
        :formatter="item.formatter || formatterVal"
      >
        <template #default="scope">
          <slot v-if="Object.keys($slots)?.includes(item.prop)" v-bind="scope" :name="item.prop" />
        </template>
      </el-table-column>
      <!-- 跨组件动态插槽传递 -->
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { formatter } from "@/utils";
// let slots = defineSlots()
let props = defineProps<{
  column: any []
  data: any []
}>()
function formatterVal(_row: any, column: { getColumnIndex: () => number; }, cellValue: string | null | undefined){
  return formatter(props.column[column.getColumnIndex()], cellValue)
}
function getAlign(item:any){
  return item.dataType === 'money' || item.dataType === 'rate' ? 'right' : 'left'
}
</script>

<style lang="scss" scoped>
  
</style>
